<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>
 
  <el-card>

  <template>

    <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="权限名称" width="180"> </el-table-column>
      <el-table-column prop="address" label="存储路径"> </el-table-column>
      <el-table-column  prop="phon" label="权限等级"> </el-table-column>
        <el-table-column label="操作"> 
   <template slot-scope="scope">
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showDialogVisible(scope.row.address)"> </el-button>
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
<!-- 分配角色 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top">
      <el-button type="danger" icon="el-icon-setting" size="mini"></el-button>
    </el-tooltip>
           </template>
        </el-table-column>
    </el-table>
  </template>
  </el-card>

    </div>
</template>
<script>
export default {
    data() {
   //自定义校验规则 验真有邮箱规则 用箭头函数
   //()里面有三个参数第一个检验规则 第二个为校验值 第三个为校验成功的回调函数
   var checkEmail=(rule,value,cb)=>{
     //验真邮箱的正则表达式
     const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

     if(regEmail.test(value)){
       return cb()
     }
     cb(new Error('请输入正确的邮箱格式'))
   }

   //验真手机号

 


var checkMobail=(rule,value,cb)=>{
     //验真邮箱的正则表达式
     const regmobile=/(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/

     if(regEmail.test(value)){
       return cb()
     }
     cb(new Error('请输入正确的邮箱格式'))
   }

   
        return {
          tableData: [{
            id:1,
            name: '商品管理',
            address: 'https://www.baidu.com/utf-8&nline_4_dg',
            phon:"一级",
            sex:'男',
            mg_state:true,
          },
           {
             id:2,
            name: '订单管理',
            address: 'https://www.baidu.com/=ut-8&nline_4_dg',
            phon:"一级",
            sex:'男',
            mg_state:false,
          },
          {
            id:3,
            name: '权限列表',
            address: 'https://www.baidu.com/ut8&tn=monline_4_dg',
            phon:"二级",
            sex:'男',
            mg_state:false,
          },
            {
            id:4,
            name: '商品列表',
            address: 'https://www.baidu.com/E-8&tn=monline_4_dg',
            phon:"二级",
            sex:'男',
            mg_state:false,
          },
           {
            id:5,
            name: '添加列表',
            address: 'https://www.baidu.com/-8&tn=monline_4_dg',
            phon:"二级",
            sex:'男',
            mg_state:false,
          },
          {
            id:5,
            name: '订单列表',
            address: 'https://www.baidu.ctf-8=monline_4_dg',
            phon:"三级",
            sex:'男',
            mg_state:false,
          },
          {
            id:5,
            name: '添加列表',
            address: 'https://www.co/utf-8&tn=monline_4_dg',
            phon:"三级",
            sex:'男',
            mg_state:false,
          }
          ],
          eidtform:{},
       queryInfo:{
           //当前显示的页数
           query:'',
          pagenum:1,
          //当前页数显示多少条数据
          pagesize:2
       },
       total:4,
       dialogVisible:false,
        dialogVisibletow:false,
       //添加用户表单数据
       ruleForm:{},
       //添加表单验证
       rules:{
         username:[
         { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
         ],
           password:[
         { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
         ],
         email:[
         { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
           {validator:checkEmail,trigger:'blur'}
         ],
         mobile:[
         { required: true, message: "请输入手机", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
           {validator:checkMobail,trigger:'blur'}
         
         ]
       }
        }
      },
      methods:{
          //监听pagesize改变的事件
          handleSizeChange(newSize){
              this.queryInfo.pagesize=newSize
              
          },
       handleCurrentChange(newPage){
           this.queryInfo.pagenum=newPage
           this.getUserlist()
       },
       getUserList(){
         alert('用户数据更新成功')
       },
       showDialogVisible(address){
        this.dialogVisibletow=true
        var data=this.ruleForm;
    alert(address)
     


      },

      removeUserById(id){
       //alert(id)
      }
      }
    
    
    
    
    }
</script>
<style scoped>

</style>